<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message"><br/>
    <button v-on:click="show = !show">点我呀</button>
    <br>
    <h1 v-if="show">
        看到我啦？！
    </h1>               <!--带有 `v-show` 的元素始终会被渲染并保留在 DOM 中,v-if不满足条件会被删除
                                  v-show只是简单地切换元素的 CSS 属性 display-->
    <h1 v-show="show">
        看到我啦？！show
    </h1>
    <hr>
    <h1 v-if="Math.random() > 0.5">
        看到我啦？！if
    </h1>           <!--v-else必须和v-if成对出现，不能独存-->
    <h1 v-else>
        看到我啦？！else
    </h1>
</div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
    var vm = new Vue({
        el:"#app", // el即element，该vue实例要渲染的页面元素
        data: { // 渲染页面需要的数据
            show: true,
            message:""
        },
        watch: {  //对数据跟踪，查看变化，一般用作调试
            message(newVal, oldVal) {
                console.log(newVal, oldVal);
            }
        }
    })
</script>
</html>